<template>
  <div class="home_page_box">
    <lang-vue />

    <div class="main_box container">
      <div class="main">
        <!-- 搜索框 -->
        <div class="search_com">
          <search />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import langVue from '../components/lang.vue'; 
  import TitleCom from '../components/title.vue';
  import Search from '../components/search.vue';
 
  export default {
    name: 'HomePage',
    components: { langVue, TitleCom, Search },
    data() {
      return {

      }
    },
  
  }
</script>

<style lang="less" scoped>
  .home_page_box {
    
    .main_box {
      width: 100%;
      position: relative;

      .main {
        width: 300px;
        padding: 10px;
        margin-top: 100px;

        // border: 1px solid #000;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1400px) {
    .main { transform: translateX(-43%) !important; }
  } 

  @media screen and (min-width: 1000px) and (max-width: 1200px) {
    .main { transform: translateX(-39%) !important; }
  } 

  @media screen and (min-width: 992px) and (max-width: 1000px) {
    .main { transform: translateX(-36%) !important; }
  } 
</style>